
<template>
  <div style="min-height: 300px; justify-content: center;position: relative" id="map"/>
</template>

<script>
import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7";
import { Mapbox, GaodeMap } from "@antv/l7-maps";
export default {
  name: 'MapChart',
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
  },
  watch: {
    chartData: {
      handler(val) {
				setTimeout(() => {
					let data = val
					const scene = new Scene({
						id: "map",
						map: new Mapbox({
							pitch: 0,
							style: "blank",
							center: [116.368652, 39.93866],
							zoom: 10.07
						})
					});
					scene.on("loaded", () => {
						fetch(
							// 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' //  获取行政区划P噢利用
							"https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json"
						)
							.then(res => res.json())
							.then(data => {
								const chinaPolygonLayer = new PolygonLayer({
									autoFit: true
								}).source(data);

								chinaPolygonLayer
									.color("name", [
										"#29A0EB",
										"#51B4EF",
										"#41ADEF",
										"#69BFF1",
										"#CCF6FD"
									])
									.shape("fill")
									.style({
										opacity: 1
									});
								//  图层边界
								const layer2 = new LineLayer({
									zIndex: 2
								})
									.source(data)
									.color("rgb(93,112,146)")
									.size(0.6)
									.style({
										opacity: 0.1
									});

								scene.addLayer(chinaPolygonLayer);
								scene.addLayer(layer2);

								// 加了这一段
								// document.addEventListener(
								// 	"click",
								// 	() => {
								// 		scene.fitBounds([[112, 32], [114, 35]]);
								// 	},
								// 	false
								// );
							});
						fetch(
							"https://gw.alipayobjects.com/os/bmw-prod/c4a6aa9d-8923-4193-a695-455fd8f6638c.json" //  标注数据
						)
							.then(res => res.json())
							.then(data => {
								const labelLayer = new PointLayer({
									zIndex: 5
								})
									.source(data, {
										parser: {
											type: "json",
											coordinates: "center"
										}
									})
									.color("#fff")
									.shape("name", "text")
									.size(12)
									.style({
										opacity: 1,
										stroke: "#fff",
										strokeWidth: 0,
										padding: [5, 5],
										textAllowOverlap: false
									});

								scene.addLayer(labelLayer);
							});
					});
				}, 300);
      },
			immediate: true
    }
  },
  methods: {
  },
  beforeDestroy() {
    this.chart.destroy()
  },
}
</script>

<style lang='scss' scoped>
</style>
